import React from 'react';
import './ReReceivable.css'
import {Button, Select, Table,  DatePicker,  Modal, Row, Col, Tooltip, Radio } from 'antd';
import axios from 'axios'
import {QuestionCircleOutlined} from '@ant-design/icons';
import echarts from 'echarts/lib/echarts';
import  'echarts/lib/chart/line';

const { RangePicker } = DatePicker;
const text = <ul style={{
    listStyle:'none',
    margin:'0',
    padding:'0',
    fontSize:'12px'}}><li>1、 因订货单《发货签收记录》和退货单《收货记录》2018年2月7日上线，故本报表从此日期开始提供数据，无法提供上线日期之前的数据；</li>
    <li>2、【应收金额】及【应退金额】对应的记录一经作废，则不纳入统计。</li>
    <li>3、【归属部门】、【当前业务员】及【区域】取《客户列表》中客户最新归属的部门、业务员和区域。</li>
</ul>;
const title = {
    color: '#96a6b6',
    fontSize: '13px',
    transition: 'all .5s',
    marginTop: '25px'
};
const purchase = {
    cursor: 'pointer',
    height: '100%'
};
const contrast = {
    color: '#7b8aa1'
};
const title2 = {
    backgroundColor:'#f8f9fd',
    textAlign:'center',
    height: '110px',
    borderTop:'1px solid #eee',
    borderBottom: '1px solid #f1f2f7',
};
const title3 = {
    cursor: 'pointer',
    height: '100%',
    borderLeft: '1px solid #eee',
    borderRight: '1px solid #eee'
};
const num = {
    color: '#415161',
    fontSize: '22px'
};
const lastnum = {
    color: '#7b8aa1',
    position: 'absolute',
    right: '0'
};
const { Option, OptGroup } = Select;
const columns = [
    {
        title: '客户名称',
        dataIndex: '',
        key: '',
    }, {
        title: '应收金额',
        dataIndex: '',
        key: '',
    }, {
        title: '回收金额',
        dataIndex: '',
        key: '',
    }, {
        title: '未收金额',
        dataIndex: '',
        key: '',
    }, {
        title: ' 应退金额',
        dataIndex: '',
        key: '',
    }, {
        title: '已退金额',
        dataIndex: '',
        key: '',
    }, {
        title: '待退金额',
        dataIndex: '',
        key: '',
    },
];
const data = [

];

function handleChange(value) {
    console.log(`selected ${value}`);
}
class ReReceivable extends React.Component {
    state = { visible: false,value:1};
    constructor(){
        super();
        this.state={

        };

    }
    componentDidMount() {

    }
    onChange = e => {
        console.log('radio checked', e.target.value);
        this.setState({
            value: e.target.value,
        });
    };
    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    handleOk = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };

    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };
    render() {

        return (
            <div id={'mainContent'}>
                <Row style={{marginBottom:'8px'}}>
                    <Col span={6}>
                        <RangePicker/>
                        <Button type="primary" style={{marginLeft:'10px'}} onClick={this.showModal}>
                            高级搜索</Button>
                    </Col>
                    <Col span={6}>
                    </Col>
                    <Col span={6}>
                    </Col>
                    <Col span={6}>
                        <div style={{textAlign:"right"}}>
                            <Tooltip placement="bottomRight" title={text}>
                                <span style={{marginRight:'5px',cursor:'pointer'}} id={'icon'}>统计说明</span>
                                <QuestionCircleOutlined className={'icon1'}/>
                                <QuestionCircleOutlined className={'icon2'}/>
                            </Tooltip>
                            <Button type="primary" style={{marginLeft:'10px'}}>导出</Button>
                        </div>
                    </Col>
                </Row>
                <Modal
                    title="高级搜索"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    width={1000}
                    okText={'确定'}
                    cancelText={'取消'}
                    centered={true}
                >
                    <div style={{marginBottom: '25px'}}>
                         <span style={{display:"inline-block",width:'390px'}}>
                           <span style={{display:"inline-block",width:'70px',marginRight:'10px'}}>统计时间</span>
                           <RangePicker style={{width:'250px'}}/>
                        </span>
                        <span style={{display:"inline-block",width:'485px'}}>
                          <Select defaultValue="1" style={{ width: 100 }} bordered={false}>
                              <Option value="1">所属部门</Option>
                              <Option value="2">所属区域</Option>
                          </Select>
                            <Select defaultValue="lucy" style={{ width: 250 }} onChange={handleChange}>
                            <OptGroup label="Manager">
                              <Option value="jack">Jack</Option>
                              <Option value="lucy">Lucy</Option>
                            </OptGroup>
                            <OptGroup label="Engineer">
                              <Option value="Yiminghe">yiminghe</Option>
                            </OptGroup>
                            </Select>
                            </span>
                    </div>
                    <div style={{marginBottom: '25px'}}>
                         <span style={{display:"inline-block",width:'400px'}}>
                             <span style={{display:"inline-block",width:'70px',marginRight:'10px'}}>经销商名称</span>
                             <Select defaultValue="1" style={{ width: 250 }}>
                                  <Option value="1">全部</Option>
                                  <Option value="2">中山</Option>
                              </Select>
                        </span>
                        <span style={{display:"inline-block",width:'485px'}}>
                            <span style={{display:"inline-block",width:'70px',marginRight:'20px'}}>当前业务员</span>
                            <Select defaultValue="1" style={{ width: 250 }}>
                              <Option value="1">全部</Option>
                              <Option value="2">未知</Option>
                          </Select>
                        </span>
                    </div>
                    <div>
                        <span style={{display:"inline-block",width:'485px'}}>
                            <span style={{display:"inline-block",width:'70px',marginRight:'5px'}}>下单方式</span>
                            <Radio.Group onChange={this.onChange} defaultValue={1} value={this.state.value}>
                                    <Radio value={1}>全部</Radio>
                                    <Radio value={2}>代下单</Radio>
                                    <Radio value={3}>自主下单</Radio>
                            </Radio.Group>
                        </span>
                    </div>

                </Modal>
                <div className={'body'}>
                    <Row gutter={20}>
                        <Col span={12} className="gutter-row">
                            <div style={title2}>
                                <Row style={{height: '110px'}}>
                                    <Col span={8} style={title3}>
                                        <div style={title}>应收金额</div>
                                        <div style={contrast}>
                                            <span style={num}>0</span>
                                            <span>笔</span>
                                        </div>
                                    </Col>
                                    <Col span={8} style={title3}>
                                        <div style={title}>回收金额</div>
                                        <div style={contrast}>
                                            <span style={num}>0</span>
                                            <span>笔</span>
                                        </div>
                                    </Col>
                                    <Col span={8} style={title3}>
                                        <div style={title}>未收金额</div>
                                        <div style={contrast}>
                                            <span style={num}>0</span>
                                            <span>笔</span>
                                        </div>
                                    </Col>
                                </Row>
                            </div>
                        </Col>
                        <Col span={12} className="gutter-row">
                            <div style={title2}>
                                <Row style={{height: '110px'}}>
                                    <Col span={8} style={title3}>
                                        <div style={title}>应退金额</div>
                                        <div style={contrast}>
                                            <span style={num}>0</span>
                                        </div>
                                    </Col>
                                    <Col span={8} style={title3}>
                                        <div style={title}>已退金额</div>
                                        <div style={contrast}>
                                            <span style={num}>0</span>
                                        </div>
                                    </Col>
                                    <Col span={8} style={title3}>
                                        <div style={title}>待退金额</div>
                                        <div style={contrast}>
                                            <span style={num}>0</span>
                                        </div>
                                    </Col>
                                </Row>
                            </div>
                        </Col>
                    </Row>
                    <div>
                        <div style={{padding:'25px 0 25px 0'}}>
                            <Table columns={columns} dataSource={data} />
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default ReReceivable;